/*
* @Author: zhangsai
* @Date: 2018/2/7
* @Last Modified by: zhangsai
* @Last Modified time: 2018/2/7
* @description: 个人中心-我的消息
*/

<template>
    <div>
        <div class="ca-m-t-20 ca-pc-msg-table">
            <el-table
                :data="messageData"
                @row-click="rowClick"
                border
            >
                <el-table-column
                    prop="type"
                    label="类型"
                    align="center"
                    width="100px">
                    <template slot-scope="scope">
                        <span class="un-read" v-if="scope.row.readStatus == 0"></span>
                        <span>{{scope.row.type | getNameById('msgType')}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="cnContent"
                    label="内容"
                    align="left">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" :content="scope.row.cnContent" placement="top-start">
                        <el-button type="text" class="ca-word-break ca-text-over-flow-ellipsis">{{scope.row.cnContent}}</el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="时间"
                    align="center">
                    <template slot-scope="scope">
                        {{scope.row.createTime | moment("YYYY-MM-DD HH:mm:ss")}}
                    </template>
                </el-table-column>
            </el-table>
            <div class="ca-m-t-20 clearfix">
                <el-pagination
                    class="pull-right"
                    @current-change="handleCurrentChange"
                    :current-page="pageIndex"
                    :page-size="10"
                    layout="total, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import { api } from '../api';
    import { STATUS_HTTP_SUCCESS, apiHttp } from '__service/csHttp';
    import { isNoAuth } from '__service/utils';
    export default {
        name: 'personalMessage',
        data() {
            return {
                // 我的消息列表
                messageData: [],
                // 表格当前页码
                pageIndex: 1,
                // 表格页码总数
                pageSize: 10,
                //
                total: 0,
                //1拟投资项目,2已投资项目,3母基金,4拟设立基金,5已设立基金,6客户,7潜在项目 ,
                detailUrlList: ['', 'pre-investment-project', 'invested-project-detail', '', 'establishing-funds', 'investing-funds-list', 'investing-funds', 'client-management-info'],
                isAuthDetail: isNoAuth('拟投资项目-项目详情-查看'),
            }
        },
        watch: {},
        props: {},
        created() {
            this.getMessageNoticeList(1)
        },
        methods: {
            // 获取消息列表
            async getMessageNoticeList(page) {
                this.pageIndex = page;
                let params = {
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize
                };
                const resData = await apiHttp(api.GET_MESSAGE_LIST, params);
                if (resData.resCode === STATUS_HTTP_SUCCESS) {
                    this.messageData = resData.data.resultData;
                    this.total = resData.data.totalCount;
                    this.$emit('getCount');
                }
            },
            // 消息通知表格行点击事件
            async rowClick(row) {
                if (row.readStatus === 0) {
                    let params = {
                        id: row.id
                    };
                    let resData = await apiHttp(api.SET_MESSAGE_STATUS, params);
                    if (resData.resCode === STATUS_HTTP_SUCCESS) {
                        this.$message({
                            message: '消息已经标记为已读!',
                            type: 'success'
                        });
                        this.getMessageNoticeList(this.pageIndex);
                    }
                } else {
                    // businessType 1拟投资项目,2已投资项目,3母基金,4拟设立基金,5已设立基金,6客户,7潜在项目 ,
                    if (!row.businessType || !row.businessId) {
                        this.$message.warning('该项目不存在');
                        return;
                    }
                    if (this.isAuthDetail === false && row.businessType === 1) {
                        this.$message.warning('无项目数据权限');
                        return;
                    }
                    if (row.type === '4') { // 如果是消息通知 切换tab
                        this.$emit('activeTab', {index: '0'});
                        return;
                    }
                    this.$router.push({name: this.detailUrlList[row.businessType], params: {itemId: row.businessId, tabIndex: row.tabId || 0, openWindow: true }});
                }
            },
            handleCurrentChange(val) {
                this.pageIndex = val;
                this.getMessageNoticeList(this.pageIndex);
            },
        },
        components: {}
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .ca-msg--notice {
        font-weight: bold;
    }
    .un-read {
        display: inline-block;
        width: 6px;
        height: 6px;
        background: #ccc;
        border-radius: 50%;
        vertical-align: middle;
        margin-top:-2px;
    }
</style>
